<template>
    <div class="displayCard">
        <el-table :data="tableData" style="width: 180px" size="small" :max-height="400" @row-click="clickRow">
            <el-table-column :show-overflow-tooltip="true" prop="event_num" label="编号" width="60" />
            <el-table-column prop="name" label="类型" width="60" />
            <el-table-column fixed="right" label="操作" width="60">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click.stop="handleClick(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog v-model="dialogVisible" title="事故详情" width="60%" :append-to-body="true">
        <el-table :data="detailData" style="width: 100%" size="small" :max-height="400" @row-click="clickRow">
            <el-table-column :show-overflow-tooltip="true" prop="event_num" label="编号" />
            <el-table-column :show-overflow-tooltip="true" prop="longtitude" label="坐标经度" />
            <el-table-column :show-overflow-tooltip="true" prop="latitude" label="坐标纬度" />
            <el-table-column prop="EventType" label="事故类型" />
            <el-table-column prop="area" label="事故区域" />
            <el-table-column prop="car_num" label="车牌号"  />
            <el-table-column prop="name" label="事故人" />
            <el-table-column prop="level" label="事故等级"/>
            
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>
      
<script setup>
import { ref, defineProps, onMounted, inject, watch, onUnmounted } from 'vue'
import { PointLayer } from '@antv/l7'
const { scene, map } = inject("$scene_map");
const tableData = ref([])
const dialogVisible = ref(false)
let pointLayer
let markLayer

const detailData = ref([])
// 该组件接受外部传入的数据
const props = defineProps({
    dataS: Array
})

// 组件挂载的时候，渲染点，并添加事故图片到scene中
onMounted(() => {
    
    reRenderCard()
})
// 接受到数据之后需要去在地图上渲染点
const reRenderCard = () => {
    // 每次重新绘制的时候，将pointLayer给移除
    if (pointLayer) {
        scene.removeLayer(pointLayer)
    }
    pointLayer = new PointLayer();
    if (props.dataS.length) {
        const source = []
        console.log(props.dataS);
        // 处理数据，然后在table中展示
        tableData.value = props.dataS.map(item => {
            const { geometry, properties: { event_num, name, ...EventType } } = item
            const coordinates = geometry.coordinates
            // 在点图层中添加数据
            source.push({
                lng: coordinates[0],
                lat: coordinates[1],
                EventType
            })
            return {
                geometry,
                event_num,
                name,
                EventType
            }
        })
        // 设置点图层
        pointLayer.source(source, {
            parser: {
                type: 'json',
                x: 'lng',
                y: 'lat'
            }
        }).shape('event4').size(16)
        // 将点图层放到场景中
        scene.addLayer(pointLayer)
    }
}              

// 点击行，进行跳转
const clickRow = (row, column, event) => {
    if (row.geometry.coordinates) {
        markLayer && scene.removeLayer(markLayer)
        // 添加动态点
        const data = {
            type: "FeatureCollection",
            features: [
                {
                    type: "Feature",
                    geometry: {
                        type: "Point",
                        coordinates: row.geometry.coordinates
                    },
                    properties: {
                        name: "marker"
                    }
                }
            ]
        }

        markLayer = new PointLayer({}).source(data)
        //在地图中添加动态点
        markLayer
            .shape('radar')
            .size(60)
            .color('#f00')
            .animate(true);
        scene.addLayer(markLayer);
        // 视角飞到事故点
        const center = row.geometry.coordinates;
            scene.setZoomAndCenter(15, center);
     

    }
}    
const handleClick = (row) => {
    const { geometry: { coordinates }, name, event_num , EventType:{EventType, area,car_num,level,id} } = row
    console.log(row)
   
    detailData.value = [
        {
            event_num,
            longtitude: coordinates[0],
            latitude: coordinates[1],
            EventType,
            area,
            car_num,
            name,
            level
        }
    ]
    dialogVisible.value = true
}          
</script>  
<style scoped>
.displayCard {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 50px;
    bottom: -650px;
    outline: none;
    color: #fff;
    background: #53697670;
    border-radius: 4px;
    box-shadow: 0 0 5px 3px #333;
}

.eleCeil {
    background: transparent;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:deep(.el-table) {
    background-color: transparent;
}

:deep(.el-table tr) {
    background-color: transparent;
    color: #fff;
    cursor: pointer;
}

:deep(.el-table tr:hover) {
    background-color: #333;
}

:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
    background-color: transparent;
}

:deep(.el-table th.el-table__cell) {
    background-color: transparent;
}

:deep(.el-table td.el-table__cell) {
    border-bottom: none;
}

:deep(.el-table__inner-wrapper::before) {
    height: 0;
}
</style>